<template>
	<view>
		<view class="wrap">
			<k-navbar title="全部订单"></k-navbar>
			<u-sticky z-index="1000" offset-top="70">
				<u-tabs active-color="#f29100" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" ></u-tabs>
			</u-sticky>
			<view class="page-box">
				<view class="order" v-for="(res, index) in  tableData" :key="res.id">
					<view class="top u-border-bottom u-padding-bottom-20">
						<view class="left">
							<view class="time">下单时间：{{res.orderTime}}</view>
						</view>
						<view class="right">{{ orderStatus[res.orderStatus] }}</view>
					</view>
					<view class="top u-padding-top-20">
						<view class="left">
							<image src="../../static/businessDistrict/shop.png" style="width:32rpx;height: 32rpx;border-radius: 10rpx;" mode=""></image>
							<view class="store">{{ res.merchantName }}</view>
						</view>
					</view>
					<view class="item">
						<view class="left">
							<image :src="res.foodOrderProductVO.productImageUrl" mode="aspectFill"></image>
						</view>
						<view class="content u-flex-1">
							<view class="title">{{res.foodOrderProductVO.productName}}</view>
							<!-- <view class="des">规格：300ml</view> -->
							<view class="u-flex u-row-between">
								<view class="price">￥{{res.foodOrderProductVO.productUnitPrice}}</view>
								<view class="num">X{{res.buyNumber || 0}}</view>
							</view>
						</view>
					</view>
					<u-gap height="1" bg-color="#C8C8C8"></u-gap>
					<view class="total u-flex u-row-between">
						<!-- ，优惠券￥1.00 -->
						<view class="">糖果抵扣￥{{res.sweetDeductPrice || 0}}</view>
						<view >合计：<text class="price">￥{{res.totalAmount}}</text></view>
					</view>
					<view class="bottom">
						<u-button class="btn" type="warning" size="mini" shape="circle">我已消费</u-button>
						<u-button class="btn" type="default" size="mini" shape="circle" @click="toDetail(res)">查看详情</u-button>
					</view>
				</view>
				<u-loadmore style="margin:30rpx 0" :status="status" bgColor="#f2f2f2"></u-loadmore>
			</view>
		</view>
	</view>
</template>

<script>
import kNavbar from '@/components/navbar/index'
export default {
	components:{
		kNavbar
	},
	data() {
		return {
			searchData: {
				page: 1,
				size: 5,
			},
			total: 0,
			tableData: [],
			list: [
				{
					name: '全部',
					value: ''
				},
				{
					name: '待付款',
					value: '0'
				},
				{
					name: '待使用',
					value: '1'
				},
				{
					name: '已使用',
					value: '2'
				},
				{
					name: '已退款',
					value: '4'
				}
			],
			current: 0,
			status: 'loadmore',
			orderStatus: {
				0: '待付款',
				1: '已付款',
				2: '已使用',
				3: '已取消',
				4: '已退款',
				5: '退款中'
			}
		};
	},
	onLoad() {
		let token = uni.getStorageSync('token');
		console.log('token', token)
		if(!token){
			uni.navigateTo({
				url:'/pages/login/index'
			})
		}
		this.getList();
	},

	methods: {
		onReachBottom() {
			if(this.tableData.length >= this.total) return ;
			this.status = 'loading';
			this.searchData.page = ++ this.searchData.page;
			setTimeout(() => {
				this.getList()
				if(this.tableData.length >= this.total) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},
		// tab栏切换
		change(index) {
			this.current = index;
			this.searchData.status = this.list[index].value
			this.searchData.page = 1;
			this.tableData = [];
			this.total = 0;
			this.status = 'loading';
			this.getList();
		},
		toDetail(item) {
			uni.navigateTo({
				url: '/pages/businessDistrict/orderDetail' + `?id=${item.id}`,
			})
		},
		getList() {
			this.$u.api.getFoodOrderList(this.searchData).then(res => {
				if(res.code == 0) {
					if (res.data.length > 0) {
						this.tableData = [...this.tableData, ...res.data];
					} else {
						// 分页结束
						this.status = 'nomore';
					}
					if (this.tableData.length  >= this.total) {
						this.status = 'nomore';
					}
					this.total = res.extraInfo;
				} else {
					uni.showToast({
						icon:'none',
					    title: res.msg
					});
				}
			})
		}
	}
};
</script>

<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>

<style lang="scss" scoped>
.page-box {
	padding-top: 30rpx;
}
.order {
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			.time {
				margin: 0 10rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
			.store {
				margin: 0 10rpx;
				font-size: 24rpx;
			}
		}
		.right {
			color: $u-type-warning-dark;
		}
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
		padding-bottom: 30rpx;
		.left {
			margin-right: 20rpx;
			image {
				width: 136rpx;
				height: 136rpx;
				border-radius: 10rpx;
			}
		}
		.content {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.title {
				color: #000;
				font-weight: bold;
			}
			.des {
				color: #C1C1C1;
				font-size: 24rpx;
			}
			.price {
				color: #FF7826;
				font-size: 28rpx;
			}
		}
	}
	.total {
		padding: 24rpx 0;
		color: #646464;
		font-size: 28rpx;
		.price {
			color: #FF6600;
			font-size: 30rpx;
		}
	}
	.bottom {
		overflow: hidden;
		.btn {
			float: right;
			margin-left: 10rpx
		}
	}
}

.wrap {
	display: flex;
	flex-direction: column;
	// padding-top: var(--window-top);
	width: 100%;
}
</style>
